<template>
    <div class="firstbot">
        <el-divider></el-divider>
        <div class="bot">
            <div class="bot_item">
                <!-- <div>
                <img src="@/assets/njrpic/firstpic/ic_battery_frame.png" alt="">
                </div> -->
                <div :class="{'electic':true,'bounce-enter-active':show}" @click="jumptik">
                    <!-- hhh -->
                    <div></div>
                </div>
                <div class="electic_item">
                    <p>电量剩余约</p>
                <span>29%</span>
                </div>
            </div>
            <div class="bot_item">
                <div :class="{'bounce-enter-active':brushshow}" @click="jumptik1">
                <img src="@/assets/njrpic/firstpic/ic_toothbrush_frame.png" alt="">
                </div>
                <!-- <div class="brush">
                    hhh
                </div> -->
                 <div class="electic_item">
                     <p>刷头剩余</p>
                <span>30天</span>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <br>
        <br>
        <br>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:false,
            brushshow:false
        }
    },
    methods:{
        jumptik(){
            this.show=true
            let that=this
            let timer=setTimeout(function(){
                that.$store.commit('getBindon',true)
                that.$router.push('/index/first/electric')
            },500)
        },
        jumptik1(){
            this.brushshow=true
            let that=this
            let timer=setTimeout(function(){
                that.$router.push('/index/first/brushhead')
            },500)
        }
    }
}
</script>
<style lang="less" scoped>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.firstbot{
    margin-bottom: 25px;
    .el-divider{
        height: 15px;
        background-color: #eeeeee;
    }
    .bot{
        display: flex;
        // height: 350px;
        padding: 25px;
        .bot_item{
            display: flex;
            flex: 1;
            margin-left: 50px;
            align-items: center;
            // background-color: aquamarine;
            border-right: 2px dashed #f0f0f0;
            img{
            width: 60%;
        }
        .electic{
            background-image: url('../../assets/njrpic/firstpic/ic_battery_frame.png');
            background-size: contain;
            background-repeat: no-repeat;
            height: 150px;
            width: 60%;
            position: relative;
            >div{
                position: absolute;
                bottom: 3px;
                left:9%;
                background-color: #69edf2;
                height:20%;
                width: 41%;
            }
        }
        .electic_item{
            width: 80%;
            text-align: center;
            p{
                color: #c0c0c0;
            }
            span{
                // color: #454545;
                font-size: 35px;
            }
        }
        }
        .bot_item:last-of-type{
            border-right: none;
        }
    }
}
</style>